import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Avatar,
  Checkbox,
  Rate,
  Progress,
  Button,
  Dropdown,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
} from 'antd';

import styles from './IdentityVerify.less';
import DescriptionList from 'components/DescriptionList';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const { Description } = DescriptionList;

const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};
@connect(({ apply }) => ({
  apply,
}))
@Form.create()
export default class IdentityVerify extends PureComponent {
  state = {
    prodectId: '',
    customerId: '',
    name: '',
    idCard: '',
    phone: '',
  };
  componentDidMount() {
    const { dispatch } = this.props;
    // console.log("componentDidMount","componentDidMount")
    // dispatch({
    //   type: 'apply/getIdentityAuthentic',
    //   payload: {
    //     prodectId: '1014811284815360042',
    //     customerId: '1014397679863222274',
    //     name: '郭军',
    //     idCard: '372926196805010296',
    //     phone: '13583099186',
    //   },
    // });
  }

  action = (
    <div style={{ align: 'center' }}>
      验证结果：
      <Tag color="green">通过</Tag>
      查询时间: 2018-5-10
    </div>
  );

  render() {
    const { apply: { identityAuthenticList, applyIdentityLoading, applyPage } } = this.props;
    return (
      <Modal title="身份验证报告" {...this.props} confirmLoading={applyIdentityLoading}>
        {/* {JSON.stringify(identityAuthenticList)} */}

        <Card type="inner" title="验证结果">
          <Tag color="green">{this.state.name}</Tag> 验证时间: 2018-07-30 14:20:20
        </Card>
        <Card type="inner" title="身份详情">
          <DescriptionList size="small" style={{ marginBottom: 16 }}>
            <Description term="身份姓名">张三</Description>
            <Description term="曾用名">张小三</Description>
            <Description term="名族">汉族</Description>
            <Description term="文化程度">幼儿园</Description>
            <Description term="婚姻状况">已婚</Description>
            <Description term="贯籍">湖北武汉</Description>
            <Description term="出生地">中国湖北省</Description>
            <Description term="原始发证地">岔路口公安局</Description>
          </DescriptionList>
          <Divider style={{ margin: '16px 0' }} />
          <DescriptionList size="small" style={{ marginBottom: 16 }} col="1">
            <Description term="工作单位">湖北武汉市岔路口工行支行</Description>
          </DescriptionList>
          <Divider style={{ margin: '16px 0' }} />
          <DescriptionList size="small" style={{ marginBottom: 16 }} col="1">
            <Description term="家庭住址">
              这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
            </Description>
          </DescriptionList>
        </Card>
        {/* <Card actions={[this.action]}>
          <DescriptionList style={{ marginBottom: 16 }} columns={2}>
            <div>
              <Description term="客户名称">
                顾万杰 <Icon style={{ color: 'green' }} type="check" />
              </Description>
              <Description term="身份证号">
                3101012222222222<Icon style={{ color: 'green' }} type="check" />
              </Description>
            </div>
            <div>
              <Description term="联系电话">
                13333333333<Icon style={{ color: 'green' }} type="check" />
              </Description>
              <Description term="出生日期">
                1991-10-09<Icon style={{ color: 'green' }} type="check" />
              </Description>
            </div>
          </DescriptionList>
        </Card> */}
      </Modal>
    );
  }
}
